<template>
  <el-dialog title="风险对象详情" :visible.sync="visible" width="50%" :before-close="handleClose">
    <el-form :model="formData" label-position="right">
      <el-form-item label="风险分析对象" :label-width="formLabelWidth">
        <el-input v-model="formData.oName" readonly style="width:90%;" />
      </el-form-item>
      
      <el-form-item label="分类" :label-width="formLabelWidth">
        <el-input v-model="formData.oType_TEXT" readonly style="width:90%;" />
      </el-form-item>

      <el-form-item label="编码" :label-width="formLabelWidth">
        <el-input v-model="formData.hazardCode" readonly style="width:90%;" />
      </el-form-item>

      <el-form-item label="是否重大危险源" :label-width="formLabelWidth">
        <el-input v-model="formData.oIfRisk_TEXT" readonly style="width:90%;" />
      </el-form-item>

      <el-form-item label="是否管控" :label-width="formLabelWidth">
        <el-input v-model="formData.whether_TEXT" readonly style="width:90%;" />
      </el-form-item>

      <el-form-item label="责任部门" :label-width="formLabelWidth">
        <el-input v-model="formData.hazardDep" readonly style="width:90%;" />
      </el-form-item>

      <el-form-item label="主要责任人" :label-width="formLabelWidth">
        <el-input v-model="formData.zyHazard" readonly style="width:90%;" />
      </el-form-item>

      <template v-if="showExtraFields">
        <el-form-item label="技术责任人" :label-width="formLabelWidth">
          <el-input v-model="formData.jsHazard" readonly style="width:90%;" />
        </el-form-item>

        <el-form-item label="操作责任人" :label-width="formLabelWidth">
          <el-input v-model="formData.czHazard" readonly style="width:90%;" />
        </el-form-item>
      </template>

      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="formData.createDate" readonly style="width:90%;" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'LookDevice',
  data() {
    return {
      visible: false,
      formLabelWidth: '150px',
      showExtraFields: false,
      formData: {
        oName: '',
        oType: '',
        oType_TEXT: '',
        hazardCode: '',
        oIfRisk: '1',
        oIfRisk_TEXT: '',
        hazardDep: '',
        hazardDepId: '',
        whether: '0',
        whether_TEXT: '',
        zyHazard: '',
        zyHazardId: '',
        jsHazard: '',
        jsHazardId: '',
        czHazard: '',
        czHazardId: '',
        deleted: '0',
        createDate: '',
        createBy: ''
      }
    }
  },
  methods: {
    show(row) {
      this.visible = true
      this.$nextTick(() => {
        // 处理分类显示文本
        const typeMap = {
          '0': '生产装置',
          '1': '罐区'
        }
        
        // 处理是否重大危险源显示文本
        const riskMap = {
          '0': '是',
          '1': '否'
        }
        
        // 处理是否管控显示文本
        const whetherMap = {
          '0': '是',
          '1': '否'
        }

        this.formData = { 
          ...row,
          oType_TEXT: typeMap[row.oType] || row.oType,
          oIfRisk_TEXT: riskMap[row.oIfRisk] || row.oIfRisk,
          whether_TEXT: whetherMap[row.whether] || row.whether
        }
        this.showExtraFields = row.oIfRisk === '0'
      })
    },
    handleClose() {
      this.visible = false
      // 重置表单数据
      this.formData = {
        oName: '',
        oType: '',
        oType_TEXT: '',
        hazardCode: '',
        oIfRisk: '1',
        oIfRisk_TEXT: '',
        hazardDep: '',
        hazardDepId: '',
        whether: '0',
        whether_TEXT: '',
        zyHazard: '',
        zyHazardId: '',
        jsHazard: '',
        jsHazardId: '',
        czHazard: '',
        czHazardId: '',
        deleted: '0',
        createDate: '',
        createBy: ''
      }
    }
  }
}
</script>

<style scoped>
.el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #fff;
  border-color: #DCDFE6;
}
</style> 